<script setup lang="ts">
	import { onMounted, ref } from 'vue'
	import { ElMessage, ElMessageBox } from 'element-plus'
	import type {
		FormInstance,
		TabsPaneContext,
	} from 'element-plus'
	import dayjs from 'dayjs'
	import setupApi from '@/api/zhitan/setup.ts'
	import productApi from '@/api/zhitan/product.ts'
	import Getshop from './getshop.vue'
	import useUserStore from '@/store/modules/user'


	const userStore : any = useUserStore()

	const dialogVisible : any = ref(false)
	const formRef : any = ref()
	const formRules : any = ref({
		image: [{
			required: true,
			message: '请添加图片',
			trigger: 'blur',
		}],
		product_group_id: [{
			required: true,
			message: '请选择产品分类',
			trigger: 'blur',
		}],
		product_name: [{
			required: true,
			message: '请选择关联产品',
			trigger: 'blur',
		}],
	})
	const form : any = ref({})
	const infoform : any = ref({})
	const groupList : any = ref([])
	const showGetshop : any = ref(false)
	const loadingRef : any = ref(null)
	const paging : any = ref({
		page: 1,
		limit: 10,
	})
	const total : any = ref(0)
	const dataList : any = ref([])// 表格

	onMounted(() => {
		getList()
	})
	// 分页代码
	function pagChange(e : any) {
		paging.value = Object.assign(paging.value, e)
		getList()
	}
	// 产品 分类
	function getcateList() {
		productApi.ProductGroup_list({ page: 1, limit: 1000, status: 1 }).then((res : any) => {
			if (res.code === 0) {
				groupList.value = res.data
			}
		})
	}
	function getList() {
		setupApi.Banner_list(paging.value).then((res : any) => {
			if (res.code === 0) {
				res.data.forEach((i : any) => {
					i.type = Number(i.type)
				})
				dataList.value = res.data
				total.value = res.count
			}
		})
	}
	function modify(row : any, type : any) {
		getcateList()
		if (type === 1) {
			form.value = {
				status: 1,
				type: 1
			}
		}
		else {
			form.value = JSON.parse(JSON.stringify(row))
		}
		dialogVisible.value = true
	}

	function removeBatch(row : any) {
		setupApi.Banner_delete({ id: row.id }).then((res : any) => {
			if (res.code === 0) {
				getList()
				dialogVisible.value = false
				ElMessage({
					type: 'success',
					message: '操作成功',
				})
			}
		})
	}
	function submitForm() {
		formRef.value && formRef.value.validate((valid : any) => {
			if (valid) {
				setupApi.Banner_edit(form.value).then((res : any) => {
					if (res.code === 0) {
						getList()
						dialogVisible.value = false
						ElMessage({
							type: 'success',
							message: '操作成功',
						})
					}
				})
			}
		})
	}
	function updateurl() {
		form.value.image = ''
	}
	function handleSuccess(row : any) {
		console.log(row, 'rrowrowrowowrrowrowrowow')
		form.value.image = row
	}
	function changedata(e : any) {
		console.log(e, 'rrowrowrowowrrowrowrowow')
		form.value.product_name = e.name
		form.value.product_id = e.id

		showGetshop.value = false
	}
</script>

<template>
	<div class="absolute-container">
		<PageMain style="position: relative;">
			<div class="d-c flex">
				<el-form :inline="true" class="demo-form-inline">
					<el-form-item label="状态" style="width: 200px;">
						<el-select v-model="paging.status" clearable placeholder="请选择状态" @clear="paging.status = null">
							<el-option label="正常" value="1" />
							<el-option label="禁用" value="2" />
						</el-select>
					</el-form-item>
					<el-form-item label="跳转类型" style="width: 200px;">
						<el-select v-model="paging.type" clearable placeholder="请选择状态" @clear="paging.type = null">
							<el-option label="不跳转" value="1" />
							<el-option label="跳转分类" value="2" />
							<el-option label="跳转单一产品" value="3" />
							<el-option label="跳转链接" value="4" />
						</el-select>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="getList()">
							<template #icon>
								<svg-icon name="ep:search" />
							</template>
							查询
						</el-button>
						<el-button @click="paging = {
                page: 1,
                limit: 10,
              }, getList()">
							重置
						</el-button>
					</el-form-item>
				</el-form>
				<div class="btnbox" v-if="userStore.permissions.includes('bannersadd')">
					<el-button type="primary" size="default" @click="modify(null, 1)">
						<template #icon>
							<svg-icon name="ep:plus" />
						</template>
						添加
					</el-button>
				</div>
			</div>
			<el-table :data="dataList" highlight-current-row border height="calc(100vh - 300px)">
				<el-table-column prop="id" label="ID" width="60" align="center" />
				<el-table-column prop="name" label="图片" align="center">
					<template #default="{ row: i }">
						<div class="flex items-center">
							<image-preview :src="i.image" :width="60" :height="40" class="mr-2" />
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="type" label="跳转类型" width="120" align="center">
					<template #default="{ row: i }">
						<el-tag type="warning" v-if="i.type===1">不跳转</el-tag>
						<el-tag type="success" v-if="i.type===2">跳转分类</el-tag>
						<el-tag type="primary" v-if="i.type===3">跳转单一产品</el-tag>
						<el-tag type="danger" v-if="i.type===4">跳转链接</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="sort" label="排序" width="100" align="center" />
				<el-table-column prop="status" label="状态" width="120" align="center">
					<template #default="{ row }">
						<div v-if="row.status === 1" class="relative flex items-center justify-center">
							<div data-v-7edfc4d9="" class="badge relative mr-2 inline-flex">
								<span
									class="absolute left-[50%] top-0 z-20 h-1.5 w-1.5 whitespace-nowrap rounded-full bg-ui-primary px-1.5 text-xs text-ui-text ring-1 ring-light before:absolute before:left-0 before:top-0 left-[100%]! before:block before:h-full before:w-full -translate-x-[50%] -translate-y-[50%] before:animate-ping before:rounded-full before:bg-ui-primary px-0! -indent-9999 dark:ring-dark before:content-empty">true</span>
							</div>
							正常
						</div>
						<div v-else class="relative flex items-center justify-center">
							<div data-v-7edfc4d9="" class="badge downcol relative mr-2 inline-flex">
								<span
									class="absolute left-[50%] top-0 z-20 h-1.5 w-1.5 whitespace-nowrap rounded-full bg-ui-primary px-1.5 text-xs text-ui-text ring-1 ring-light before:absolute before:left-0 before:top-0 left-[100%]! before:block before:h-full before:w-full -translate-x-[50%] -translate-y-[50%] before:animate-ping before:rounded-full before:bg-ui-primary px-0! -indent-9999 dark:ring-dark before:content-empty">true</span>
							</div>
							暂停
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="desc" label="创建时间" width="180" align="center">
					<template #default="{ row: i }">
						{{ dayjs(i.create_time * 1000).format('YYYY-MM-DD HH:mm:ss') }}
					</template>
				</el-table-column>
				<el-table-column fixed="right" label="操作" width="220" align="center">
					<template #default="scope">
						<el-button type="primary" text @click="modify(scope.row, 2)"
							v-if="userStore.permissions.includes('bannersedit')">
							<template #icon>
								<svg-icon name="ep:edit" />
							</template>修改
						</el-button>
						<el-popconfirm title="确定删除吗？" @confirm="removeBatch(scope.row)"
							v-if="userStore.permissions.includes('bannersdelete')">
							<template #reference>
								<el-button type="danger" text>
									<template #icon>
										<svg-icon name="ep:delete" />
									</template>删除
								</el-button>
							</template>
						</el-popconfirm>
					</template>
				</el-table-column>
			</el-table>
			<page-compon :page="paging.page" :size="paging.limit" :total="total" style="margin-top: 16px;"
				@pag-change="pagChange" />
		</PageMain>
		<HDialog v-model="dialogVisible" :title="form.id ? '编辑轮播图' : '新增轮播图'" modulewidth="500px">
			<el-form ref="formRef" :model="form" :rules="formRules" label-position="top" label-width="100px">
				<el-form-item label="图片：" prop="image" class="avatar">
					<ImageUpload v-model:url="form.image" :isneedwh="true" :width="3" :notip="true" :height="2"
						@on-success="handleSuccess($event)" />
				</el-form-item>
				<!-- <el-form-item label="图片名称：" prop="name">
					<el-input v-model="form.name" size="large" placeholder="请输入图片名称" clearable />
				</el-form-item> -->
				<el-form-item label="跳转类型：" prop="type">
					<el-radio-group v-model="form.type">
						<el-radio :value="1">
							不跳转
						</el-radio>
						<el-radio :value="2">
							跳转分类
						</el-radio>
						<el-radio :value="3">
							跳转单一产品
						</el-radio>
						<el-radio :value="4">
							跳转链接
						</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item v-if="form.type===2" label="产品分类：" label-width="120px" prop="product_group_id">
					<el-select v-model="form.product_group_id" size="large" placeholder="请选择产品分类" style="width: 100%;">
						<el-option v-for="item in groupList" :key="item.id" :label="item.name" :value="item.id" />
					</el-select>
				</el-form-item>
				<el-form-item label="关联产品：" prop="product_name" v-if="form.type===3">
					<div @click="showGetshop = true" style="width:100%;">
						<el-input style="width:100%;" v-model="form.product_name" size="large" placeholder="请添加关联产品"
							clearable />
					</div>
				</el-form-item>
				<el-form-item label="外部链接：" prop="url" v-if="form.type===4">
					<el-input v-model="form.url" style="width:100%;" size="large" placeholder="请输入外部链接地址" clearable />
				</el-form-item>
				<el-form-item label="排序：" prop="sort">
					<el-input-number v-model="form.sort" style="width: 100%;" size="large" placeholder="请输入排序号" :min="0"
						controls-position="right" />
				</el-form-item>
				<el-form-item label="状态：" prop="status">
					<el-radio-group v-model="form.status">
						<el-radio :value="1">
							正常
						</el-radio>
						<el-radio :value="2">
							暂停
						</el-radio>
					</el-radio-group>
				</el-form-item>
			</el-form>

			<template #footer>
				<div class="fotterbtn">
					<el-button class="cancel" @click="dialogVisible = false, form = {} ">
						取消
					</el-button>
					<el-button type="primary" @click="submitForm">
						保存
					</el-button>
				</div>
			</template>
		</HDialog>
		<Getshop v-if="showGetshop" v-model="showGetshop" :infoform="infoform" @changedata="changedata($event)" />
	</div>
</template>

<style lang="scss" scoped>
	.avatar {
		:deep(.el-image) {
			width: 300px !important;
			height: 200px !important;
		}

		:deep(.image-slot) {
			width: 300px !important;
			height: 200px !important;
		}


		/* :deep(.el-upload__tip) {
	  display: none !important;
	} */
	}

	@import "@/assets/styles/tool";

	:deep(.guestBox .el-overlay-dialog) {
		background-color: rgb(255 255 255 / 80%);
	}

	:deep(.guestBox .el-dialog) {
		padding: 24px;
		border-radius: 10px;
	}

	:deep(.guestBox header) {
		padding-left: 16px;
		font-size: 16px;
		font-weight: 550;
		border-bottom: 1px solid #f2f2f2;
	}

	:deep(.guestBox .el-dialog__headerbtn .el-dialog__close) {
		font-size: 20px;
		color: #000;
	}

	.btnbox {
		position: absolute;
		top: 20px;
		right: 20px;
	}

	.btnbox>.el-button {
		font-size: 12px;
	}

	.downcol {
		.before\:bg-ui-primary::before {
			background-color: red;
		}

		.bg-ui-primary {
			background-color: red;
		}
	}
</style>